<script setup lang='ts'>
import {ref, reactive, onMounted} from 'vue'
import {FormRules, ElTree } from 'element-plus'
import {FromItem} from '@/components/dFrom/dFrom'
import {GuideListItem, getWestDoctorKnowledgeRuleList} from '@/api/physicalExaminationManager/physicalKnowlege'
import dDialog from '@/components/dDialog/dDialog.vue'
import dFrom from '@/components/dFrom/dFrom.vue'


const props = defineProps({
  //显示
  showDialog:{
    type:Boolean,
    required:true
  },
  //数据，保存的健教指导json字符串
  data:{
    type:String,
    required:true
  },
  // 是否禁用编辑
  disabled:{
    type:Boolean,
    defult:false
  }
})

const emits = defineEmits(['close', 'updateGuideDisplayValue', 'updateGuideCheckboxValue'])

//信息
const formData = reactive(props.data ? JSON.parse(props.data) : {selected:[], text:''})

// 显示加载状态
const showSaveLoading = ref(false)

// 表单规则
const rules = reactive<FormRules>({
  text: [
    {message: '长度应不超过2000个字符', trigger: ['change', 'blur'], max: 2000}
  ]
})

//表单项
const fromItems = ref<Array<FromItem>>([
  {label:'', placeholder:'请选择', prop:'selected', type:'slot', slotName:'selected' },
  {label:'', placeholder:'请输入健教指导内容', prop:'text', type:'input', inputType:'textarea', disabled:props.disabled }
])

//表单清除控制
const resetFieldsFlag = ref(false)

const validateFlag = ref(false)

// 确认按钮
const onConfirm = () => {
  validateFlag.value = !validateFlag.value
}

//关闭
const onClose = () => {
  emits('close')
  //关闭后清除表单数据以及表单验证数据 可根据具体业务自行调整
  resetFieldsFlag.value = !resetFieldsFlag.value
}

//取消按钮
const onCancel = () => {
  onClose()
}

const treeRef = ref<InstanceType<typeof ElTree>>()

//表单验证通过事件
const onSubmit = () => {
  showSaveLoading.value = true

  //更新需要保存的json字符串
  const checkedNodes = treeRef.value?.getCheckedNodes(true)
  formData.selected = checkedNodes?.map(item => item.id)
  emits('updateGuideCheckboxValue', JSON.stringify(formData))

  //更新需要显示并保存的文本内容
  let guideDisplayValue = checkedNodes?.map(item => item.name).join(';\n')
  if (formData.text) {
    guideDisplayValue += ';\n' + formData.text
  }
  emits('updateGuideDisplayValue', guideDisplayValue)

  showSaveLoading.value = false
  onClose()
}

const defaultProps = {
  children: 'healthContentList',
  label: 'name'
}

const treeData = ref<GuideListItem[]>([])
//获取西医健教指导内容
const getTreeData = () => {
  getWestDoctorKnowledgeRuleList().then(res => {
    const {data} = res.data
    data?.forEach(item => {
      item.disabled = props.disabled
      item.healthContentList?.forEach((contentItem) => {
        contentItem.name = contentItem.healthValue
        contentItem.disabled = props.disabled
      })
    })
    treeData.value = data

    treeRef.value?.setCheckedKeys(formData.selected || [])
  })
}

onMounted(() => {
  getTreeData()
})

</script>

<template>
  <d-dialog
    title="选择健教指导"
    custom-class="edit"
    :show-dialog="showDialog"
    :show-save-loading="showSaveLoading"
    :hide-save-btn="disabled"
    width="600px"
    @cancel="onCancel"
    @confirm="onConfirm"
    @close="onClose"
  >
    <d-from
      label-position="right"
      :label-width="0"
      :reset-fields-flag="resetFieldsFlag"
      :validate-flag="validateFlag"
      :rules="rules"
      :form-data="formData"
      :form-items="fromItems"
      :form-line-num="1"
      @submit="onSubmit"
    >
      <template #selected>
        <el-tree ref="treeRef" :data="treeData" :props="defaultProps" show-checkbox node-key="id" />
      </template>
    </d-from>
  </d-dialog>
</template>

<style scoped>
</style>